<template>
  <view>
    <view v-for="(comment, index) in myComments" :key="index" class="comment-item" @click="postcardclick(comment)">
      <!-- 左侧用户图像 -->
      <view class="userImg">
        <image :src="comment.commentUserimg" class="user-logo"></image>
      </view>   
      <!-- 右侧评论内容和时间 -->
      <view class="comment-content-wrapper">
        <text class="comment-content">{{ comment.content }}</text>
        <text class="comment-time">{{ comment.createTime }}</text>
      </view>
      <button class="details-button">查看详情</button>
    </view>
    <!-- 如果没有评论时的提示 -->
    <view v-if="myComments.length === 0" class="no-comment">
      暂无评论
    </view>
  </view>
</template>

<script>
import { http } from "../static/service/requestAddress/rtas.js";

export default {
  data() {
    return {
      myComments: [], // 用户的评论列表
      commentDetails: [], // 存储评论详情
    };
  },
  async created() {
    // 使用 async/await 来等待获取评论列表完成
    await this.getMyComments();
  },
  methods: {
    // 获取用户的评论列表
    getMyComments() {
      return new Promise((resolve, reject) => {
        var user = uni.getStorageSync("user");
        // 验证用户是否登录
        if (!user) {
          uni.$u.toast("您还未登录");
          reject("用户未登录");
          return;
        }
        var userid = JSON.parse(user).id;
        uni.request({
          url: http + "fistcomment/byuser/" + userid,
          method: "GET",
          complete: (res) => {
            console.log(res);
            if (res.data.code == 20021) {
				if(res.data.date.length>0){
              this.myComments = res.data.date;
              var commentid = res.data.date[0].id;
              console.log(res.data.date[0].id);
              // 使用 Promise.resolve() 表示异步操作成功
              resolve(Promise.resolve());
			   uni.$u.toast("获取评论成功!");
			  }
            } else {
              uni.$u.toast("获取评论失败!");
              reject("获取评论失败");
            }
          },
        });
      });
    },
    // 根据commentid查询post表
    checkCommentInPost(commentid) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: http + "post/getPostByCommentId/" + commentid,
          method: "GET",
          complete: (res) => {
            console.log("post" , res.data.date);  
            if (res.data.code == 20021) {
              this.commentDetails = res.data.date; // 赋值给commentDetails
              // 使用 Promise.resolve() 表示异步操作成功
              resolve(Promise.resolve());
            } else {
              uni.$u.toast("获取post详情失败!");
              reject("获取post详情失败");
            }
          },
        });
      });
    },
    // 点击动态详情
    async postcardclick(comment) {
      try {
        // 跳转到动态详情页
        await this.checkCommentInPost(comment.id); // 确保在跳转前获取评论详情
        uni.navigateTo({
          url: "/forum/info?data=" + JSON.stringify(this.commentDetails),
        });
      } catch (error) {
        console.error("postcardclick 错误:", error);
      }
    },

  },
};
</script>


<style lang="scss">
.comment-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
  background-color: #f9f9f9; /* 调整背景颜色 */
  cursor: pointer; /* 添加鼠标悬停效果 */
}

.userImg {
  margin-right: 20rpx; /* 调整用户图像与评论内容的间距 */
}

.user-logo {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%; /* 将用户图像设置为圆形 */
  object-fit: cover; /* 图像裁剪方式 */
}

.comment-content-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.comment-content {
  font-size: 28rpx;
  color: #333; /* 调整评论内容字体颜色 */
  line-height: 1.5; /* 调整行高 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.comment-time {
  font-size: 22rpx;
  color: #999; /* 调整评论时间字体颜色 */
  margin-top: 5rpx;
}

.details-button {
  font-size: 22rpx;
  color: #007bff; /* 调整按钮字体颜色 */
  background-color: transparent;
  border: 1rpx solid #007bff; /* 添加边框 */
  border-radius: 4rpx;
  padding: 8rpx 16rpx;
  margin-left: auto; /* 将按钮向右对齐 */
  transition: background-color 0.3s ease, color 0.3s ease; /* 添加过渡效果 */
}

.details-button:active {
  background-color: #007bff; /* 鼠标悬停时按钮背景颜色 */
  color: #fff; /* 鼠标悬停时按钮字体颜色 */
}

</style>
